<template>
  <div class="games-page">
    <ul class="top-games" v-if="false">
      <template v-for="(item,idx) in topList" >
        <li v-if="!item.topType" :class="{'no-data':!item.id}">
          <template v-if="item.id">
            <a :href="'/game/'+item.id" target="_blank">
              <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
              <div class="con-mask"></div>
              <div class="basic-data">
                <div class="tit" :title="item.title">{{item.title}}</div>
                <div class="desc">{{topTextDescs[idx]}}</div>
              </div>
              <div class="left-icos">
              <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                  <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                  <img loading="lazy" slot="reference" src="../assets/pro/common/new.png" alt="">
              </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                  <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                  <img loading="lazy" slot="reference" src="../assets/pro/common/hot.png" alt="">
                </el-popover>
                <el-popover popper-class="gm-info-pop"
                        placement="top-start"
                        trigger="hover"  v-if='item.videoUrl'>
                        <i class="sm-tip" slot-content>内容含视频</i>
                        <img loading="lazy" slot="reference" src="../assets/pro/common/video.png" alt="">
                      </el-popover>
              </div>
              <div class="right-icos hid-el" v-if="item.tagsList && item.tagsList.length > 0">
                <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title" v-if="t.image" :src="t.image" alt="" />
              </div>
            </a>
            <span class="is-adv" v-if="idx==topList.length-1">广告</span>
          </template>
        </li>
        <li v-else>
          <a :href="item.url" target="_blank">
            <img loading="lazy" :src="item.image" alt="" />
          <div class="con-mask"></div>
          <div class="basic-data">
            <div class="otit">{{item.title}}</div>
          </div>
          <span class="is-adv">广告</span>
          </a>
        </li>
      </template>
    </ul>

    <div class="gm-home-stic" v-if="false">
      <!-- <div class="zj-ba-data yx-cate" :class="{'scale':isScale}" id="mainfilter">
        <div class="bal-tit">
          <el-popover popper-class="xkj-sou-pop"
                    placement="bottom"
                    trigger="hover">
                    <div class="xj-search-desc">
                      <div class="sub-desc">推荐标准：</div>
                      <div class="sub-d">
                        1. 网站未入库/重大更新；<br/>
                        2. 非搬运/抄袭；<br/>
                        3. 创意表现突出；<br/>
                        4. 制作品质优良
                      </div>
                    </div>
            <a slot="reference" class="no-bg">游戏类型</a>
          </el-popover>
        </div>

        <pswiper wrapclass="yx-cates" id="cateSwp" ref="refCateSwp" :betn="20" :slides="6.5" prevclass="gmcate-page-prev-msize" nextclass="gmcate-page-next-msize">
          <li v-for="(item,idx) in gTypes" :key="idx" class="swiper-slide yx-c-item" :class="{'active':queryParams.categoryIds==item.value,'no-data':!item.value}" :style="{backgroundColor:item.bgColor}" v-if="item.value!=''">
              <a :href="'/games?cat='+item.value" @click.prevent="chooseByCate(item)" v-if="item.value">
                <img loading="lazy" src="" alt="">
                <span class="txt">{{item.title}}</span>
              </a>
          </li>
        </pswiper>
      </div> -->
      <!-- <pswiper wrapclass="nav-cates" :betn="20" ref="refSwCate" :slides="12" prevclass="cate-page-prev"
          nextclass="cate-page-next" id="cateSwp">
          <li class="swiper-slide" :class="{ 'active-color': !curTab }"><a :href="'/screenshots'"
                  @click.prevent="chooseFun()">全部</a></li>
          <li class="swiper-slide" :class="{ 'active-color': fun.selected }" v-for="(fun, fx) in funs"><a :href="'/screenshots?f=' + fun.value"
                  @click.prevent="chooseFun(fun)">{{ fun.title }}</a></li>
      </pswiper> -->
      <div class="gp-filter">
        <div class="gp-img-layout">
          <DropDown :list="tList" :value.sync="queryParams.orderByColumn" :tlist="tagFilter"
                :subvalue.sync="queryParams.rank" @change="handleSearch()" style="min-width: 150px;" placeholder="" /> 
          <div class="label-filter">
                <span class="tit">平台</span>
                <div class="plat-items">
                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                        <i class="sm-tip" slot-content>PC</i>
                        <span slot="reference" class="pitem windows" :class="{ 'active': queryParams.device == 'PC' }"
                            @click="chooseDevice('PC')"></span>
                    </el-popover>
                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                        <i class="sm-tip" slot-content>主机</i>
                        <span slot="reference" class="pitem xbox" :class="{ 'active': queryParams.device == '主机' }"
                            @click="chooseDevice('主机')"></span></el-popover>
                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                        <i class="sm-tip" slot-content>掌机</i>
                        <span slot="reference" class="pitem switch" :class="{ 'active': queryParams.device == '掌机' }"
                            @click="chooseDevice('掌机')"></span></el-popover>
                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                        <i class="sm-tip" slot-content>手游</i>
                        <span slot="reference" class="pitem apple" :class="{ 'active': queryParams.device == '手游' }"
                            @click="chooseDevice('手游')"></span></el-popover>
                </div>
          </div>
          <div class="label-filter">
              <span class="tit">版式</span>
              <div class="plat-items">
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                      <i class="sm-tip" slot-content>横屏</i>
                      <span slot="reference" class="pitem h-screen" :class="{ 'active': queryParams.orientation == '横屏' }"
                          @click="chooseScreen('横屏')"></span></el-popover>
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                      <i class="sm-tip" slot-content>竖屏</i>
                      <span slot="reference" class="pitem s-screen" :class="{ 'active': queryParams.orientation == '竖屏' }"
                          @click="chooseScreen('竖屏')"></span></el-popover>
              </div>
          </div>
          <div class="zw-fn-el">
            <div class="seach-bx" :class="{'active':searchIsFocus,'is-nuvisit':showFnew}">
              <form @submit.prevent="()=>{return false}" class="q-f-item-wrap">
                  <template v-for="c in cateObj">
                      <div class="q-f-item" v-for="s in c.items" v-if="s.selected"><span class="ct">{{c.name}}</span><span class="ct-val">{{s.title}}</span><i class="it-clr" @click="onParamterClear(c,s)"></i>
                      </div>
                  </template>
                  <input type="text" @focus="searchIsFocus=true" @blur="searchIsFocus=false" :placeholder="'按标题/风格/类型等搜索 '+inspirationInfo.articleNum+' 款游戏'" v-model="queryParams.title" @keypress.enter="onEnter"/><a class="cancel-search" v-if="queryParams.title" @click="queryParams.title=''"></a>
              </form>
            </div>
            <div class="game-n-u-visit" v-if="showFnew">
              <div class="nv-content">
                <div class="nv-content-l">
                  <span>「点这里，搜索游戏」</span>
                  <span>按标题风格类型，快速查询</span>
                </div>
                <a class="n-u-v-close" @click="handlCloseTop"></a>
              </div>
              <div class="cursor"></div>
            </div>
          </div>
        <div class="bs-layout">
          <div class="plat-items">
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
              <i class="sm-tip" slot-content>大图模式</i>
                <span slot="reference" class="f-layout" :class="{'active':model=='big'}" @click="model='big'"></span>
            </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                <i class="sm-tip" slot-content>小图模式</i>
                <span slot="reference" class="mup-layout" :class="{'active':model=='small'}" @click="model='small'"></span>
            </el-popover>
          </div>
        </div>
        <div class="bs-g-flabel">
          <span class="cur" @click="showFilter=!showFilter">筛选</span>
        </div>
        </div>
      </div>
    </div>
    <div class="list-wrap-flex">
    <div class="search-area mobile" :class="{'is-mobile-fix':showLfilter}">
      <!-- <a class="close-sl-filter" @click="showLfilter=false"></a> -->
      <div class="seach-bx" :class="{'active':searchIsFocus,'is-nuvisit':showFnew}">
        <form @submit.prevent="()=>{return false}">
            <input type="text" @focus="searchIsFocus=true" @blur="searchIsFocus=false" placeholder="搜索资源…" v-model="queryParams.title" @keypress.enter="onEnter"/><a class="cancel-search" v-if="queryParams.title" @click="queryParams.title=''"></a>
        </form>
      </div>
      <FilterBy  class="sch-sticky" :cates="cateObj" :params="queryParams" ref="refFilterBy" @change="onFilterChange" :viewnumfield="pageTab==1?'articleNum':'imageNum'"
      v-show="showFilter && cateObj.length > 0" />
    </div>
    <div class="list-data-box">
      <div class="top-filter-area">
        <div class="flc">
          <a @click="handleShowFilter" class="col-side-bar"></a>
          <div class="nums" v-if="pageTab==-1">
          </div>
          <template v-else>
            <div class="nums" v-if="pageTab==1">
              <template v-if="queryParams.title">
                {{ '"'+queryParams.title+'“' }} 的搜索结果
              </template>
              <template v-else>
                <count-to :start-val="0" :end-val="inspirationInfo.articleNum" :duration="300"></count-to> 款游戏
              </template>
            </div>
            <div class="nums" v-if="pageTab==2">
              <template v-if="queryParams.title">
                {{ '"'+queryParams.title+'“' }} 的搜索结果
              </template>
              <template v-else>
                <count-to :start-val="0" :end-val="inspirationInfo.imageNum" :duration="300"></count-to> 张截图
              </template>
            </div>
          </template>
        </div>
        <div class="filter">
          <div style="margin-left:0px;" class="bs-g-flabel gpic-clr" :class="{'is-fenw':showImgColorFnew&&queryParams.imageColor}">
                  <div class="cur">
                      <input type="text" id="colorfilter" style="display: none;">
                      <span v-if="queryParams.imageColor" :style="{ backgroundColor: queryParams.imageColor }"
                          class="query-color"></span>颜色 <i v-if="queryParams.imageColor"
                          @click="handleClearClr" class="clear-by-search"></i>
                  </div>
                  <div class="games-filter" v-if="queryParams.imageColor">
                      <div class="games-filter-wrap color-wrap">
                          <div class="rtzd">
                              准确度：
                              <div class="rtzd-box">
                                  <el-slider :min="0" tooltip-class="no-tip" v-model="queryParams.colorrto" @change="onColorRtoChange"
                                  :max="80"></el-slider><span class="rto-val">{{ queryParams.colorrto}}</span>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="game-n-u-visit img-color-fenw" v-if="showImgColorFnew&&queryParams.imageColor">
                      <div class="nv-content">
                          <div class="nv-content-l">
                              <span>「悬浮这里，显示调节滑块」</span>
                              <span>数值越低越贴近主色调</span>
                          </div>
                          <a class="n-u-v-close" @click="handlCloseImgColorTop"></a>
                      </div>
                  </div>
              </div>
          <DropDown :list="tList" :value.sync="queryParams.orderByColumn" :tlist="tagFilter"
              :subvalue.sync="queryParams.rank" @change="handleSearch()" style="min-width: 150px;" placeholder="" />
          <div class="switch-type-box">
            <a :class="{'active':pageTab==1}" @click="pageTab=1">游戏</a>
            <a :class="{'active':pageTab==2}" @click="pageTab=2">截图</a>
          </div>
        </div>
      </div>
      <div class="selected-filters" v-if="showclearall">
        <template v-for="c in cateObj">
          <div class="q-f-item" v-for="s in c.items" v-if="s.selected"><span class="ct-val">{{ s.title }}</span><i class="it-clr" @click="onParamterClear(c, s)"></i></div>
        </template>
        <a class="clr-all" @click="handleClearAll">清除全部</a>
      </div>

      <div class="vwrap">
        <ul class="games-data" :class="[model]" v-if="pageTab==1">
          <li v-for="(item, idx) in list" :key="idx" class="gd-item" :class="{'no-data':!item.id}">
            <a :href="'/game/'+item.id" target="_blank" v-if="item.id">
              <div class="mimg-box">
                <img loading="lazy" :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError"/>
                <span class="pnum">{{ item.totalImageCount }}</span>
                
                <div class="cate-dsc">{{item.device}}{{item.categoryName?(item.device?' · ':'')+item.categoryName:''}}{{item.style?' · '+item.style:''}}{{item.era?' · '+item.era:''}}</div>
              </div>
            <div class="basic-info">
              <div class="title">{{ item.title }}</div>
              <div class="bot-desc">
                <span class="uname" v-if="item.member">
                  <img loading="lazy" class="u-img" v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 40, name: item.member.userName }"/>
                  <a class="name-text">{{ item.member.userName }}</a>
                  <img loading="lazy" class="u-m-tag" v-for="tag in item.member.tagsList" :src="tag.image" alt="">
                </span>
                <div class="znum">
                  {{ item.praiseStr }}
                </div>
                <div class="vnum">
                  {{ item.seeStr }}
                </div>
              </div>
            </div>
            <div class="left-icos">
              <!-- <img loading="lazy" src="../assets/pro/common/hot.png" alt="" v-if="item.hot" /> -->
              <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                  <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                  <img loading="lazy" slot="reference" src="../assets/pro/common/new.png" alt="">
              </el-popover>
              <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                <img loading="lazy" slot="reference" src="../assets/pro/common/hot.png" alt="" v-if="item.hot">
              </el-popover>
              <el-popover popper-class="gm-info-pop"
                        placement="top-start"
                        trigger="hover">
                        <i class="sm-tip" slot-content>内容含视频</i>
                        <img loading="lazy" slot="reference" src="../assets/pro/common/video.png" alt="" v-if='item.videoUrl'>
                      </el-popover>
            </div>
            <div class="right-icos hid-el" v-if="item.tagsList && item.tagsList.length > 0">
              <!-- <img loading="lazy" src="../assets/pro/common/rz2.png" alt=""> -->
              <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title" v-if="t.image" :src="t.image" alt="" />
            </div>
            <!-- <div class="con-mask hid-el"></div> -->
            </a>
          </li>
        </ul>
        <ImgList id="1" ref="refWaf" :list="list" :columns="columns"  :defaultw="431" v-else-if="pageTab==2&&list.length>0"/>
        <div class="b-empty-box" v-if="!isloading&&list.length==0" >
          <Empty text="没有找到符合条件的结果~" v-if="!isloading&&list.length==0"/>
          <a class="bsearch" :href="'/searchs?t=&k='+(queryParams.title?queryParams.title:'')" target="_blank">扩大范围继续搜索</a>
        </div>

        <div class="no-more-text" v-if="!hasMore&&!isloading&&list.length>0">没有更多了</div>
        <div class="pro-bot-loading" v-if="isloading">
            <i class="el-icon-loading"></i>
        </div>
      </div>

    </div>
    </div>
    <!-- <Empty text="没有找到符合条件的结果~" style="padding-bottom:100px;" v-if="!isloading&&list.length==0"/> -->
    
    <UnLoginMask/>
    <!-- <transition name="fade"> -->
      <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body  :visible.sync="showInfo" direction="btt">
      <gameInfo @close="onInfoClose" :id="currentId"/>
    </el-drawer>
    <!-- </transition> -->
    <div class="loading-mask" v-if="isloading"></div>

    <div class="show-l-filter-mask" v-if="showLfilter" @click="handleCloseFilter"></div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to';
import ImgList from '@/components/WaterfallFlowImgList'
import FilterBy from '@/components/FilterBy'
import UnLoginMask from '@/components/UnLoginMask'
import Empty from '@/components/Empty'
import DropDown from '@/components/dropdown'
import pswiper from '@/components/pswiper'
import moment from 'moment'
import gameInfo from '@/components/gameInfo'
import api from '@/api/api'
export default {
  components:{gameInfo,pswiper,DropDown,Empty,UnLoginMask,FilterBy,ImgList,CountTo},
  data() {
    return {
      showLfilter:false,
      columns:5,
      pageTab:-1,
      showclearall:false,
      showImgColorFnew:false,
      curTab:'',
      funs:[],
      showFilter:true,
      cateObj: [],
      isScale:false,
      showFnew:false,
      searchIsFocus:false,
      isloading:true,
      topTextDescs:['今日最佳国风游戏','今日最佳欧美游戏','今日最佳二次元游戏','今日最佳日韩游戏','今日最佳Q版卡通游戏','今日最佳科幻游戏','今日最佳军事游戏'],
      inspirationInfo:{
          imageNum:0,
          content:'',
          articleNum:0
      },
      cateIdx:-1,
      isAutoTakeTo:false,
      tagFilter:[],
      tList:[],
      topList:[{},{},{},{},{},{},{},{},{}],
      isFocus:false,
      model:'big',
      currentId:'',
      showInfo: false,
      keyword: '',
      gTypes: [{},{},{},{},{},{},{},{}],
      list: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
      queryParams: {
        colorrto:10,
        pageNum: 1,
        pageSize: 30,
        orderByColumn:'createTime',
        rank:'首页推荐',
        categoryId:22,
        isAsc:'desc',
        categoryIds:'',
        device:''
      },
      total: 0,
      hasMore: true,
      scrollLoaded: false,
      allCates: [],
      curAllCateKey: '',
      curCates: [],
      curFullPath:''
    }
  },
  watch: {
    $route(f, b) {
      let _style=this.$route.query.style;
      if(_style){
        let that=this;
        let _allStyles=this.allCates.styles.map(r=>{return r.value;});
        if(_allStyles.includes(_style)){
          this.cateObj[0].items.map(item=>{
            if(item.value==_style){
              item.selected=true;
              that.cateObj[0].checked=true;
              that.cateObj[0].showAll=true;
              that.showclearall=true;
            }else{
              item.selected=false;
            }
          })
          this.queryParams.style=_style;
        }
        this.handleSearch();
      }
    },
    keyword(newd,old){
      this.allCates.map(parent=>{
        parent.result.map(item=>{
          if(item.title.indexOf(newd)>-1){
            item.show=true;
          }else{
            item.show=false;item.showOther=false;
          }
        })
      })
    },
    pageTab(newval){
      // if(this.pageTab==1){
      //   // this.queryParams.rank='首页推荐';
      //   this.$router.replace({path:'/games?t='+newval+(this.$route.query.style?'&style='+this.$route.query.style:'')})
      // }else{
      //   // this.queryParams.rank='';
      // }
      this.$router.replace({path:'/screenshots?t='+newval+(this.$route.query.style?'&style='+this.$route.query.style:'')})
      this.handleSearch();
    }
  },
  destroyed() {
    window.removeEventListener('scroll',this.docScroll);
  },
  async mounted() {
    let that = this;
    if(!localStorage.getItem('GAMES-NYD')){
      this.showFnew=true;
    }
    if(!localStorage.getItem('IMG-COLOR-NYD')){
        this.showImgColorFnew=true;
    }
    // let prm = {
    //     pageNum: 1,
    //     pageSize: 8,
    //     orderByColumn: 'see',
    //     isAsc: 'desc'
    //   }
    // let res=await api.articlelist(prm);

    let _tops=[];

    let start=new Date();
    let starttime=moment(new Date(start).setDate(start.getDate()-1)).format('YYYY-MM-DD');
    let end=new Date(start.setDate(start.getDate()));
    let endtime=moment(end).format('YYYY-MM-DD');

    // let res=await api.hotWords({type:0,showAll:true,pageNum:1,pageSize:30});
        
    // this.funs = res.data;
    
    // let nparams={style:'国风',sort:'day_rank'}
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='欧美';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='二次元';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='日韩';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='Q版卡通';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='科幻';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];
    // nparams.style='军事';
    // res=await api.getGameRank(nparams);
    // _tops=[..._tops,...res.data.games.list];

    // res=await api.getHomeNavs();
    // res.data.map(item=>{
    //   item.topType=3;
    // })
    // _tops=[..._tops,...res.data.splice(0,2)];

    
    // let domainUrl=this.$imgdomainurl;
    // _tops.map(item=>{
    //   let _vtime=null;
    //   if(item.updateTime){
    //     _vtime=item.updateTime;
    //   }else if(item.createTime){
    //     _vtime=item.createTime;
    //   }else if(item.create_time){
    //     _vtime=item.create_time.replace('T',' ');
    //   }
    //   _vtime=Math.abs(new Date(_vtime).getTime());
    //   let srcsets=[];
    //   srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x432.webp 1x');
    //   srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x432.webp 2x');
    //   srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x432.webp 3x');
    //   item.srcsets=srcsets.join(',')
    //   item.lazy={
    //     src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x432.webp',
    //     error: require('@/assets/loading_error.png'),
    //     loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
    //   }
    // })
    // this.topList=_tops;

    let res=await api.getCategoryFilter({type:'linggan',subType:'images'});
    res.data.tags.map(item=>{
      if(item.title=='全部推荐'){
        item.title='全部游戏';
      }
    })
    this.tagFilter=res.data.tags.filter(r=>{
      return r.title!='编辑精选'&&r.title!='普通推荐'
    });
    this.tList=res.data.news;

    
    // res=await api.articlelist({orderByColumn:'see',isAsc:'desc',startTime:starttime,endTime:endtime,pageNum:1,pageSize:8});
    
    this.curFullPath=this.$route.fullPath;

    // let _gTypes = localStorage.getItem('G-TYPES');
    // _gTypes = JSON.parse(decodeURIComponent(_gTypes));
    // this.gTypes = _gTypes;

    // let _allCates = JSON.parse(decodeURIComponent(localStorage.getItem('CATE-ALL-TYPES')));
    
    res = await api.getCategoryForInspiration();
    let newObj = {};
    newObj.categorys = res.data.filter(r => {
      return r.key == 'categoryThirdId';
    })[0].result;
    newObj.themes = res.data.filter(r => {
      return r.key == 'theme';
    })[0].result;
    newObj.funs = res.data.filter(r => {
      return r.key == 'gameFunc';
    })[0].result;
    newObj.materials = res.data.filter(r => {
      return r.key == 'game_material';
    })[0].result;
    newObj.devices = res.data.filter(r => {
      return r.key == 'categorySecondId';
    })[0].result;
    newObj.orientations = res.data.filter(r => {
      return r.key == 'orientation';
    })[0].result;
    newObj.eras = res.data.filter(r => {
      return r.key == 'era';
    })[0].result;
    newObj.styles = res.data.filter(r => {
      return r.key == 'style';
    })[0].result;

    localStorage.setItem('OBJ-CATE-ALL-TYPES', encodeURIComponent(JSON.stringify(newObj)));

    // let _allCateTypes=JSON.parse(decodeURIComponent(localStorage.getItem('OBJ-CATE-ALL-TYPES')));
    this.allCates=newObj;
    // <span :class="{ active: curAllCateKey == 'theme' }" @click="chooseCateByKey('theme')">游戏主题</span>
    //           <span :class="{ active: curAllCateKey == 'style' }" @click="chooseCateByKey('style')">游戏风格</span>
    //           <span :class="{ active: curAllCateKey == 'categoryThirdId' }" @click="chooseCateByKey('categoryThirdId')">游戏类型</span>
    //           <span :class="{ active: curAllCateKey == 'era' }" @click="chooseCateByKey('era')">上线年份</span>

    // let _cdatas={
    //   theme:{items:_allCateTypes.themes,field:'tags'},
    //   style:{items:_allCateTypes.styles,field:'style'},
    //   categoryThirdId:{items:_allCateTypes.categorys,field:'categoryThirdId'},
    //   era:{items:_allCateTypes.eras,field:'era'}
    //   };
    let _cdatas=[];
    _cdatas.push({ name: '风格', items: newObj.styles, queryfield: 'style' })
    _cdatas.push({ name: '类型', items: newObj.categorys, queryfield: 'categoryIds' })
    _cdatas.push({ name: '主题', items: newObj.themes, queryfield: 'tags' })

    _cdatas.push({ name: '功能', items: newObj.funs, queryfield: 'paramImagesDescFunc' })
    _cdatas.push({ name: '材质图案', items: newObj.materials, queryfield: 'paramImagesDescMaterial' })

    _cdatas.push({ name: '平台', items: newObj.devices, queryfield: 'device' })
    _cdatas.push({ name: '版式', items: newObj.orientations, queryfield: 'orientation' })
    _cdatas.push({ name: '上线年份', items: newObj.eras, queryfield: 'era' })
    _cdatas.map(item => {
      item.showAll=false;
      item.items.map(r => {
        r.selected = false;
      })
    })

    this.curAllCateKey = _cdatas[0].key;

    let _tag=this.$route.query.tags;
    let _style=this.$route.query.style;
    let _cat=this.$route.query.cat;
    let _dev=this.$route.query.dev;
    let _fun=this.$route.query.paramImagesDescFunc;
    let _k=this.$route.query.k;

    let _allTags=newObj.themes.map(r=>{return r.value;});
    if(_allTags.includes(_tag)){
      this.isAutoTakeTo=true;
      _cdatas[2].items.map(item=>{
        if(item.value==_tag){
          item.selected=true;
          _cdatas[2].checked=true;
          _cdatas[2].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
      this.queryParams.tags=_tag;
    }
    let _allStyles=newObj.styles.map(r=>{return r.value;});
    if(_allStyles.includes(_style)){
      this.isAutoTakeTo=true;
      _cdatas[0].items.map(item=>{
        if(item.value==_style){
          item.selected=true;
          _cdatas[0].checked=true;
          _cdatas[0].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
      this.queryParams.style=_style;
    }
    let _allCateIds=newObj.categorys.map(r=>{return r.value;});
    if(_allCateIds.includes(_cat)){
      this.isAutoTakeTo=true;
      _cdatas[1].items.map(item=>{
        if(item.value==_cat){
          item.selected=true;
          _cdatas[1].checked=true;
          _cdatas[1].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
        this.queryParams.categoryIds=_cat;
    }

    let _allFuns=newObj.funs.map(r=>{return r.value;});
    if(_allFuns.includes(_fun)){
      this.isAutoTakeTo=true;
      _cdatas[3].items.map(item=>{
        if(item.value==_fun){
          item.selected=true;
          _cdatas[3].checked=true;
          _cdatas[3].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
      this.queryParams.paramImagesDescFunc=_fun;
    }

    let _allDevs=newObj.devices.map(r=>{return r.value;});
    if(_allDevs.includes(_dev)){
      this.isAutoTakeTo=true;
      _cdatas[5].items.map(item=>{
        if(item.value==_dev){
          item.selected=true;
          _cdatas[5].checked=true;
          _cdatas[5].showAll=true;
          that.showclearall=true;
        }else{
          item.selected=false;
        }
      })
      this.queryParams.device=_dev;
    }

    if(_k){
      this.queryParams.title=_k;
      this.isAutoTakeTo=true;
    }

    this.cateObj = _cdatas;
    this.curCates = _cdatas[0].items;
    // this.allCates = _cdatas;

    res=await api.getInspirationStatis();
    this.inspirationInfo=res.data;

    this.$nextTick(()=>{
      if(that.$refs['refCateSwp'])
        that.$refs['refCateSwp'].init();

      if(that.$refs['refSwCate'])
        that.$refs['refSwCate'].init();
    })

    $(document.body).delegate('.has-f-t','mouseover',(e)=>{
      $(e.target).parents('.gp-filter').css({zIndex:115})
    }).delegate('.has-f-t','mouseout',(e)=>{
      $(e.target).parents('.gp-filter').css({zIndex:111})
    })
    // if(this.isAutoTakeTo){
    //   setTimeout(()=>{
    //     $('body,html').animate({
    //       'scrollTop':$('.top-games').height()+30
    //     },200);
    //   },500)
    // }
    
    let tab=this.$route.query.t||this.$route.query.filterCapType;
    if(tab){
      this.pageTab=tab;
    }else{
      this.pageTab=1;
      this.queryList();
    }

    window.addEventListener('scroll',this.docScroll)


    var copalette = [["#111111", "#FFFFFF", "#9E9E9E", "#A48057", "#FC85B3", "#FF2727","#FFA34B","#FFD534","#47C595","#51C4C4","#2B76E7","#6D50ED"]];
    let colorParams={
        showPalette: true,
        maxSelectionSize:0,
        showSelectionPalette: false,
        palette: copalette,
        showInput: true,
        preferredFormat: "hex6",
        clickoutFiresChange: false,
        cancelText:'清空',
        chooseText:"确定"
    }
    let rqueryColor=this.$route.query.imageColor;
    if(rqueryColor){
        colorParams.color=rqueryColor;
    }
    $("#colorfilter").spectrum(colorParams).on('change.spectrum', function(e, color) {
        that.queryParams.imageColor=$('.default-view-color span').attr('title');
        if(that.pageTab==2){
          that.handleSearch();
        }else{
          that.pageTab=2;
        }
    }).on('clear.spectrum', function(e, color) {
        that.queryParams.imageColor='';
        that.handleSearch();
    })
  },
  methods: {
    handleCloseFilter(){
      this.showLfilter=false;
      document.body.style.overflow='inherit';
    },
    handleShowFilter(){
      this.showLfilter=true;
      document.body.style.overflow='hidden';
    },
    handlCloseImgColorTop(){
      if(this.showImgColorFnew)
      {
          this.showImgColorFnew=false;
          localStorage.setItem('IMG-COLOR-NYD',false);
      }
    },
    onColorRtoChange() {
        this.handlCloseImgColorTop();
        this.handleSearch();
    },
    handleClearClr(){
      this.queryParams.imageColor='';
      this.handleSearch();
    },
    async queryImgList() {
      var that = this;

      this.isloading = true;
      let pram=Object.assign({},that.queryParams);
      if(pram.pageNum==1){
          // this.list=this.$bhelper.vlist;
      }

      if(pram.rank=='全部游戏')pram.rank='';
      api.searchImgs(pram).then(result=>{

          let old = that.list;

          let datas=result.data.images.list;
          datas.forEach(item => {
              item.show=false;item.showOther=false;
              that.$bhelper.convertImgItem(item,that);
          })

          if(datas.length>0)
              that.queryParams.last=datas[datas.length-1].id;

              
          if(pram.pageNum==1){
            that.list=datas;
          }
          else{
            that.list = [...old, ...datas];
          }

          that.total = result.total;

          if ((result.data && (result.data.length < pram.pageSize || result.data.length == 0))||datas.length<pram.pageSize) {
              that.hasMore = false;
          } else {
              that.hasMore = true;
          }

          setTimeout(()=>{
              that.isloading = false;
          },300)
          setTimeout(()=>{
            that.scrollLoaded = true;
          },1000)
      }).catch(res=>{
          that.list=[];
          that.isloading=false;
          // loading.close();
          that.isDataError=true;
      })
    },
    calculateTilt(corners){
        const{x:x1,y:y1}=corners[0];//左上
        const{x:x2,y:y2}=corners[1];// 右上
        // 计算 dy 和 dx
        const dy=y2-y1;
        const dx=x2-x1;
        //计算倾角(弧度->角度)
        const angle =Math.atan2(dy,dx)*(180 /Math.PI);
        // 返回角度
        return angle;
    },
    handlCloseImgColorTop(){
        if(this.showImgColorFnew)
        {
            this.showImgColorFnew=false;
            localStorage.setItem('IMG-COLOR-NYD',false);
        }
    },
    handleClearAll(){
      this.$refs['refFilterBy'].clearAll();

      this.showclearall=false;

      this.queryParams={
        colorrto:10,
        pageNum: 1,
        pageSize: 30,
        orderByColumn:'createTime',
        rank:'首页推荐',
        categoryId:22,
        isAsc:'desc',
        categoryIds:'',
        device:''
      }
      this.handleSearch();
    },
    chooseFun(item) {
        this.curTab=item?item.title:'';
        this.funs.map(item=>{
            item.selected=false;
        })
        if(item){
            item.selected=true;
            this.queryParams.title=item.title;
        }else{
            this.queryParams.title='';
        }
        this.handleSearch();
    },
    onFilterChange(_params, _type, _allCate) {
      // if(this.showLfilter)this.showLfilter=false;
      this.cateObj = _allCate;
      this.queryParams = _params;
      if (_type == '10') {
        if(this.pageTab!=2){
          this.pageTab=2;
        }else{
          this.handleSearch();
        }
      } else {
        this.handleSearch();
      }
    },
    onParamterClear(parent, sub) {
      // sub.selected=!sub.selected;
      this.$refs['refFilterBy'].handleSelSub(parent, sub);
    },
    onEnter(e){
      if(this.showFnew){
        this.handlCloseTop();
      }
      this.handleSearch(e);

      window.history.pushState({}, 0, '/screenshots'+(e.target.value?'?k='+e.target.value:''))
    },
    loadError(e){
        e.target.removeAttribute('srcset');
    },
    handlCloseTop(){
      this.showFnew=false;
      localStorage.setItem('GAMES-NYD',false);
    },
      onLoaded(e,item){
      let domainUrl=this.$imgdomainurl+'article-';
      let el=e.target;
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      let srcsets=[];
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@1x432.webp 1x');
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@2x432.webp 2x');
      srcsets.push(domainUrl+item.id+'-'+_vtime+'@3x432.webp 3x');
      el.srcset=srcsets.join(',')
    },
    getimgObj(item){
      let _vtime=null;
      if(item.updateTime){
        _vtime=item.updateTime;
      }else if(item.createTime){
        _vtime=item.createTime;
      }else if(item.create_time){
        _vtime=item.create_time.replace('T',' ');
      }
      _vtime=Math.abs(new Date(_vtime).getTime());
      return{
        src:this.$imgdomainurl+'article-'+item.id+'-'+_vtime+'@1x432.webp',
        error: require('@/assets/loading_error.png'),
        loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
      }
    },
    handleXClear(){
      window.history.pushState({}, 0, '/screenshots')
      this.queryParams.title='';
      // this.allCates.map(item=>{
      //   item.items.map(sub=>{
      //     sub.checked=false;
      //   })
      // })
      this.handleSearch();
    },
    loadMore(){
      this.queryParams.pageNum++;
      this.queryList();
    },
    docScroll(e){
      let isTrue=window.scrollY>$('.top-games').height();
      if(isTrue){
        if(!this.isScale){
          this.isScale=true;
        }
      }else{
        this.isScale=false;
      }
      let that=this;
      let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight

        if (that.scrollLoaded == false) return
        if (jHeight <= 200 && that.hasMore) {
            if(!localStorage.getItem('token')){
              that.$parent.noLoginIsTak=false;
              that.$parent.showLoginView=true;
              that.isloading=false;
              window.removeEventListener('scroll',that.docScroll);
              return;
            }
            that.scrollLoaded = false;
            that.loadMore();
        }
    },
    chooseByCate(_item){
      this.allCates[2].items.map(item=>{
        item.checked=false;
        if(item.value==_item.value){
          item.checked=true;
        }
      })
      this.queryParams.categoryIds=_item.value;
      this.handleSearch();
      // this.queryParams.pageNum=1;
      // this.list=[];
      // this.scrollLoaded=false;
      // this.hasMore=true;
      
      // if(this.isAutoTakeTo){
      //   setTimeout(()=>{
      //     $('body,html').animate({
      //       'scrollTop':$('.top-games').height()+50
      //     },200);
      //   },500)
      // }
      // let that=this;
      // setTimeout(()=>{
      //   that.queryList();
      // },100)
    },
    chooseDevice(_device) {
        let that=this;

        let pd=this.cateObj.filter(r=>{
            return r.queryfield=='device';
        })
        let p=pd[0].items.filter(r=>{return r.value==_device});

        this.$refs['refFilterBy'].handleSelSub(pd[0],p[0]);

        // this.cateObj.map(item => {
        //     if (item.queryfield == 'device') {
        //     item.items.map(r => {
        //         r.selected = false;
        //         if (r.value == _device&&that.queryParams.device!=r.value) r.selected = true;
        //     })
        //     }
        // })
        // this.$refs['refFilterBy'].cateObj=this.cateObj;
        // this.$forceUpdate();
        // this.queryParams.device = _device == this.queryParams.device ? '' : _device;
        
        // this.handleSearch();
    },
    chooseScreen(_screen) {
        let pd=this.cateObj.filter(r=>{
            return r.queryfield=='orientation';
        })
        let p=pd[0].items.filter(r=>{return r.value==_screen});

        this.$refs['refFilterBy'].handleSelSub(pd[0],p[0]);

        // let that=this;
        // this.cateObj.map(item => {
        //     if (item.queryfield == 'orientation') {
        //     item.items.map(r => {
        //         r.selected = false;
        //         if (r.value == _screen&&that.queryParams.orientation!=r.value) r.selected = true;
        //     })
        //     }
        // })
        // this.queryParams.orientation = _screen == this.queryParams.orientation ? '' : _screen;

        // this.handleSearch();
        
    },
    handleSearch(e){
      // $('body,html').animate({
      //   'scrollTop':$('#mainfilter').offset().top-143+30
      // },200);
      if(this.queryParams.categoryIds||this.queryParams.device||this.queryParams.paramImagesDescFunc||this.queryParams.paramImagesDescMaterial||this.queryParams.style||this.queryParams.tags||this.queryParams.orientation||this.queryParams.era)
      {
        this.showclearall=true;
      }else{
        this.showclearall=false;
      }
      this.queryParams.last='';
      if(e)e.target.blur();
      this.queryParams.pageNum=1;
      // this.list=[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
      this.scrollLoaded=false;
      this.hasMore=true;

      $('body,html').animate({
        'scrollTop':0
      },200);

      this.queryList();
    },
    onInfoClose(){
      window.history.pushState({}, 0,this.curFullPath);
      document.body.style.overflow='inherit';
      this.showInfo=false;
    },
    handleShowInfo(_item){
      window.history.pushState({}, 0, '/game/'+_item.id);
      this.currentId=_item.id;
      document.body.style.overflow='hidden';
      this.showInfo=true;
    },
    handleCancelAllCate() {
      this.allCates.map((item) => {
        item.result.map((cate) => {
          cate.checked = false
        })
      })
      this.$forceUpdate()
      this.handleSearch();
    },
    handleConfirmSelectCate() {
      let datas = this.allCates.filter((r) => {
        return r.key == 'tags'
      })[0].result;

      let tags=[];
      datas.map(item=>{
        if(item.checked){
          tags.push(item.title);
        }
      })
      datas = this.allCates.filter((r) => {
        return r.key == 'style'
      })[0].result;

      let style='';
      datas.map(item=>{
        if(item.checked){
          style=item.title;
        }
      })

      let categoryIds=[];
      datas = this.allCates.filter((r) => {
        return r.key == 'categoryIds'
      })[0].result;
      datas.map(item=>{
        if(item.checked){
          categoryIds.push(item.value);
        }
      })

      datas = this.allCates.filter((r) => {
        return r.key == 'era'
      })[0].result;

      let era='';
      datas.map(item=>{
        if(item.checked){
          era=item.title;
        }
      })

      this.queryParams.tags=tags;
      this.queryParams.style=style;
      this.queryParams.categoryIds=categoryIds;
      this.queryParams.era=era;
      // this.queryParams.pageNum=1;
      // this.list=[];
      // this.scrollLoaded=false;
      // this.hasMore=true;
      // this.queryList();
      this.handleSearch();
    },
    handleSelSub(_cate) {
      if(this.curAllCateKey=='style'||this.curAllCateKey=='era'){
        if(_cate.checked){
          _cate.checked=!_cate.checked;
        }
        else{
          this.curCates.map(item=>{
            item.checked=false;
          })
          _cate.checked=true;
        }
        this.$forceUpdate()
        this.handleConfirmSelectCate();
        return;
      }
      if (_cate.checked) {
        _cate.checked = !_cate.checked;
      } else {
        _cate.checked = !_cate.checked
      }

      this.$forceUpdate();
      this.handleConfirmSelectCate();
    },
    chooseCateByKey(idx,_key) {
      this.cateIdx=idx;
      this.keyword=''
      this.curAllCateKey = _key;
      this.curCates = this.allCates[idx].result;
    },
    handleLoadingMore() {
      this.queryParams.pageNum++
      this.queryList()
    },
    queryList(){
      if(this.pageTab==1){
        this.queryGameList();
      }else{
        this.queryImgList();
      }
    },
    async queryGameList() {
      var that = this

      // const loading = this.$loading({
      //   lock: true,
      //   text: '努力加载中...',
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0, 0, 0, 0.7)'
      // });
      this.isloading=true;
      if(that.queryParams.pageNum==1){
        that.list=[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}];
      }
      let result = await api.articlelist(that.queryParams);
      
      if(that.queryParams.pageNum==1){
          that.list=[];
      }
      setTimeout(()=>{
          that.isloading = false;
      },300)

      let old = that.list

      let domainUrl=that.$imgdomainurl;
      result.data.map(item=>{
        let _vtime=null;
        if(item.updateTime){
          _vtime=item.updateTime;
        }else if(item.createTime){
          _vtime=item.createTime;
        }else if(item.create_time){
          _vtime=item.create_time.replace('T',' ');
        }
        _vtime=Math.abs(new Date(_vtime).getTime());
        let srcsets=[];
        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
        srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
        item.srcsets=srcsets.join(',')
        item.lazy={
          src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
          error: require('@/assets/loading_error.png'),
          loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
        }
      })
      that.list = [...old, ...result.data]

      that.total = result.total

      let totalPage = result.total % that.queryParams.pageSize == 0 ? result.total / that.queryParams.pageSize : parseInt(result.total / that.queryParams.pageSize) + 1
      if (result.data && (result.data.length < that.queryParams.pageSize || that.queryParams.pageNum >= totalPage)) {
        that.hasMore = false
      } else {
        that.hasMore = true
      }
      setTimeout(()=>{
        that.scrollLoaded = true;
      },1000)
    },
    version(time) {
      let date = new Date(time)
      return date.getTime()
    },
    handleGmCatePrev() {
      this.gmswiper.slidePrev()
    },
    handleGmCateNext() {
      this.gmswiper.slideNext()
    },
  }
}
</script>

<style lang="less">
.games-page {
  // min-height: 1500px;
  padding-bottom:200px;
  .gm-home-stic{
    // position: sticky;
    // top:84px;
    // z-index:11;
    // background:#111;
  }
  .gp-filter {
    display:inline-block !important;
    width:100%;
    margin:0px;
    padding:30px 0px;
    padding-top:0px;
    top:196px;
    .gp-img-layout{
        display: flex;
        align-items: center;
        .q-f-item-wrap{
          display: flex;
          align-items: center;
          // padding-left:10px;
          grid-gap:5px;
        }
        .zw-fn-el{
          max-width: calc(100% - 730px);
        }
    }
    .mobile{
        display: none;
    }
  }
  .top-games {
    display: flex;
    flex-wrap: wrap;
    grid-gap:20px;
    // margin-bottom:30px;
    li {
      // min-width:275px !important;
      // width: 255px !important;
      width:calc((100% - 100px) / 6);
      height: 178px !important;
      border-radius: 16px;
      overflow: hidden;
      // margin-right: 20px;
      position: relative;
      border: 2px solid transparent;
      transition:.2s all linear;
      &.no-data{
        background:#1D1D1F;
      }
      .hid-el {
        // display: none;
        opacity: 0;
      }
      &:hover{
        border-color: #11CCB1;
        cursor: pointer;
        a>img{
          transform:scale(1.08);
        }
        .hid-el {
          // display: none;
          opacity:1;
        }
      }
      a>img{
        height:100%;object-fit: cover;
        width:100%;
      }
      &:last-child {
        // margin-right: 0px;
      }
      &:nth-child(1) {
        // min-width: 530px !important;
        width:calc((100% - 40px) / 3);
        height: 369px !important;
        // margin-right: 20px;
        // margin-bottom: 20px;
        a>img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      &:nth-child(2) {
        width:calc((100% - 40px) / 3);
        // margin-bottom: 20px;
        height: 369px !important;
        // margin-right: 20px;
        a>img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      &:nth-child(3) {
        // margin-bottom: 20px;
        // min-width: 530px !important;
        // margin-right: 0px;
        width:calc((100% - 40px) / 3);
        height: 369px !important;
        a>img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }

      .con-mask {
        height: 129px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
      }

      .is-adv {
        position: absolute;
        right: 10px;
        bottom: 10px;
        font-size: 12px;
        color: #848393;
        background: #1d1d1f;
        width: 34px;
        border-radius: 4px;
        text-align: center;
        line-height: 18px;
      }
      .left-icos {
        position: absolute;
        left: 10px;
        top: 10px;
        display: flex;
        align-items: center;
        img {
          &:first-child {
            margin-right: 10px;
          }
        }
      }
      .right-icos {
        position: absolute;
        right: 10px;
        top: 10px;
        display: flex;
        align-items: center;
        img {
          &:first-child {
            // margin-right:10px;
          }
        }
      }
      .basic-data {
        position: absolute;
        bottom: 11px;
        left: 13px;
        right: 12px;
        z-index: 1;
        .tit {
          font-size: 20px;
          font-weight: 500;
          line-height: 33px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .otit {
          line-height: 22px;
          font-size: 14px;
          font-weight: 500;
          color:#ffffff99;
        }
        .desc {
          font-size: 14px;
          margin-top: 4px;
          font-size: 14px;
          font-weight: 500;
          color:#ffffff99;
        }
      }
    }
  }

  .gm-cate-page-prev {
    background: url('../assets/pro/more_right_arrow.svg') no-repeat;
    background-size: cover;
    width: 50px;
    height: 50px;
    transform: rotate(180deg);
    z-index: 1;
    left: 15px !important;
    top: 40px;
    border-radius: 8px;
    &:after {
      display: none;
    }
    &:hover {
      background: url('../assets/pro/more_right_arrow.svg') no-repeat;
      background-size: cover;
    }
  }
  .gm-cate-page-next {
    background: url('../assets/pro/more_right_arrow.svg') no-repeat;
    background-size: cover;
    width: 50px;
    height: 50px;
    z-index: 1;
    border-radius: 8px;
    right: 15px;
    &:after {
      display: none;
    }
    &:hover {
      background: url('../assets/pro/more_right_arrow.svg') no-repeat;
      background-size: cover;
      // opacity:.6 !important;
    }
  }
  .bal-tit {
    font-size: 26px;
    color: #fff;
    margin-bottom: 10px;
    // height: 37px;
    // line-height: 37px;
    a {
      background: url('../assets/pro/more_arrow.svg') no-repeat;
      display: inline-block;
      height: 100%;
      background-position: right 15px;
      padding-right: 20px;
    }
    .no-bg {
      background: none;
      cursor: default;
    }
    .random-change {
      font-size: 12px;
      color: #848393;
    }
  }

  .zj-ba-data {
    margin-top: 60px;
    position:sticky;
    top:84px;
    z-index:11;
    background:#111;
    .data-wrap {
      display: flex;
      .bdl-data-item {
        width: 216px;
        height: 216px;
        border-radius: 16px;
        overflow: hidden;
        margin-right: 20px;
        margin-bottom: 20px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
    .yx-cates {
      display: flex;
      padding-right: 180px;
      .yx-c-item {
        min-width: 216px;
        height: 98px;
        background: #1d1d1f;
        width: auto !important;
        margin-right: 20px;
        border-radius: 16px;
        position: relative;
        opacity:.6;
        border:2px solid transparent;
        transition:.1s all linear;
        &.no-data{
          background:#1D1D1F;
        }
        &:hover{
          opacity:1;
          border-color:#11CCB1;
        }
        >a{
          display: inline-block;
          width:100%;
          height:100%;
        }
        .txt {
          color: #fff;
          font-size: 16px;
          position: absolute;
          bottom: 13px;
          left: 16px;
        }
        &.active{
          opacity:1;
          border:2px solid #11CCB1;
        }
      }
    }

    &.scale{
      .yx-cates{
        .yx-c-item{
          width:120px;
          min-width:120px;
          height:44px;
          border:1px solid transparent;
          border-radius:8px;
          a{
            display: flex;
            justify-content: center;
            align-items: center;
            .txt{
              position: relative;
              left:inherit;
              bottom:inherit;
            }
          }
          &:hover{
            border:1px solid #11CCB1;
          }
          &.active{
            border:2px solid #11CCB1;
          }
        }
      }

      .gmcate-page-next-msize{
        top:22px;
        width:40px;height:40px;
        right:0px;
      }
      .gmcate-page-prev-msize{
        top:22px;
        width:40px;height:40px;
      }
    }
  }
}

</style>